import React, { Component } from 'react'
import { Route, Link } from 'react-router-dom'
import routes from './routes'
import Home from './pages/Home'
import About from './pages/About'
export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <Link className="list-group-item" to="/about">
                About
              </Link>
              <Link className="list-group-item" to="/home">
                Home
              </Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* <Home></Home>
                <About></About> */}
                {/* <Route path="/home" component={Home}></Route>
                <Route path="/about" component={About}></Route> */}
                {routes.map((item) => {
                  return (
                    <Route
                      key={item.path}
                      path={item.path}
                      // component={item.component}
                      //由于要把home对应的二级路由数据传递给home组件,所以最好不好用component,而是使用render属性
                      render={(props) => {
                        // 写render的原因: 是因为我们自己实例化home,就可以给home传递数据
                        return (
                          <item.component
                            {...props}
                            childs={item.children}
                          ></item.component>
                        )
                      }}
                    ></Route>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
